<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./alibaba/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./alibaba/fonts/font.css" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./less/css/Message.css" />
    <script src="./js/jquery.min.js" ></script>
</head>
<body>
<div id="message_box1">
    <div class="message_box1_content">
        <div class="col-xs-4 mb1c_box1">
            <span onclick="window.location.href='SellCar.html'" class="icon iconfont back icon-back"></span>
        </div>
        <div class="col-xs-4 text-center mb1c_box2">
            <a onclick='showChat("志军")'>客服</a>
        </div>
        <div class="col-xs-4 text-right mb1c_box3">
            <span class="icon iconfont icon-xiaoxi"></span>
        </div>
    </div>
</div>
<div id="message_box2">
    <div id="content" class="message_box2_content">
        <div class="mb2c_time">2019-08-10 19:30</div>
        <div class="mb2c_left">
            <div class="text-center mb2c_left_box1">
                <img src="./images/userImages/xiaojiejie_01.png">
            </div>
            <div class="mb2c_left_box2">
                <p>您好，我看您这明天是去深圳的顺风车，方便搭个伴吗？男生一枚...</p>
            </div>
        </div>

        <div class="mb2c_time">2019-08-12 19:30</div>
        <div class="mb2c_right">
            <div class="mb2c_right_box1" style="">
                <p>您好！没问题啊，明天几点出发？</p>
            </div>
            <div class="mb2c_right_box2 text-center">
                <img src="./images/userImages/xiaojiejie_02.png" />
            </div>
        </div>

        <div class="mb2c_left">
            <div class="text-center mb2c_left_box1">
                <img src="./images/userImages/xiaojiejie_01.png">
            </div>
            <div class="mb2c_left_box2">
                <p>您好，我看您这明天是去深圳的顺风车，方便搭个伴吗？男生一枚...</p>
            </div>
        </div>
    </div>
</div>
<div id="message_box3">
    <div class="mb3_box1">
        <div>
            <textarea></textarea>
        </div>
    </div>
    <div class="mb3_box2 text-center">
        <span class="icon iconfont icon-biaoqingbao1"></span>
    </div>
    <div class="mb3_box3 text-center">
        <span class="icon iconfont icon-icon_tianjia"></span>
    </div>
    <div class="mb3_box4">
        <div id="submit" class="text-center btn-primary">发送</div>
    </div>
</div>
<script>
    let str_m;
    $(function(){
        // 首次加载就自动滚动到最下方
        judgeScroolHight();
        console.log($('.mb3_box4').first().find('.btn-primary').html())
        $('.mb3_box4').first().find('.btn-primary').click(function(){
            // console.log('点击事件')
            str_m = $('.mb3_box1').find('textarea').val();
            let html=`<div class="mb2c_right">
                            <div class="mb2c_right_box1" style="">
                                <p>${str_m}</p>
                            </div>
                            <div class="mb2c_right_box2 text-center">
                                <img src="./images/userImages/xiaojiejie_02.png" />
                            </div>
                        </div>`;
            // 将输入的内容添加到对话框中
            $('.message_box2_content').first().append(html)
            // 清空输入框里面的值
            $('.mb3_box1').find('textarea').val('')
            judgeScroolHight()
            // console.log('高度',$('.message_box2_content').first().height())
        })

        // 自动滚动到对话框的最底部
        function judgeScroolHight(){
            // to do
        }
        // 点击输入自动出现发送按钮
        $('.mb3_box1').find('textarea').focus(function(){
            // console.log('获得焦点')
            $('.mb3_box2').first().css('display','none')
            $('.mb3_box3').first().css('display','none')
            $('.mb3_box4').first().css('display','block')

        })
        // 点击 #message_box1,#message_box2盒子自动隐藏发送按钮
        $('#message_box1,#message_box2').click(function(){
            // console.log('失去焦点')
            $('.mb3_box2').first().css('display','block')
            $('.mb3_box3').first().css('display','block')
            $('.mb3_box4').first().css('display','none')
        })
    })

    //     ---------------------------------聊天
    var username;
    $(function () {
        var toName;
        $.ajax({
            url:"/user/getUsername",
            success:function (res) {
                console.log(res)
                username = res;
                $("#username").html("用户："+ username +"<span>在线</span>");
                // $("#username").html("用户：123<span>在线</span>");
            },
            async:false //同步请求，只有上面好了才会接着下面
        });

        var ws = new WebSocket("ws://localhost:8080/chat");

        //服务器
        // var ws = new WebSocket("ws://47.113.193.144:8901/chat");
        ws.onopen = function (ev) {
            $("#username").html("用户："+ username +"<span>在线</span>");
        }
        //接受消息
        ws.onmessage = function (ev) {
            var datastr = ev.data;
            var res = JSON.parse(datastr);
            //判断是否是系统消息
            if(res.system){
                //好友列表
                //系统广播
                var names = res.message;
                var userlistStr = "";
                var broadcastListStr = "";
                for (var name of names){
                    if (name != username){
                        userlistStr += "<a onclick='showChat(\""+name+"\")'>"+ name +"</a></br>";
                        broadcastListStr += "<p>"+ name +"上线了</p>";
                    }
                };
                $("#hylist").html(userlistStr);
                $("#xtlist").html(broadcastListStr);

            }else {
                //不是系统消息
                var str = "<div class=\"mb2c_left\">\n" +
                    "                <div class=\"text-center mb2c_left_box1\">\n" +
                    "                    <img src=\"./images/userImages/xiaojiejie_01.png\">\n" +
                    "                </div>\n" +
                    "                <div class=\"mb2c_left_box2\">\n" +
                    "                    <p>"+ res.message +"</p>\n" +
                    "                </div>\n" +
                    "            </div>"
                // var str = "<span id='mes_left'>"+ res.message +"</span></br>";
                if (toName == res.fromName)
                    $("#content").append(str);

                var chatdata = sessionStorage.getItem(res.fromName);
                if (chatdata != null){
                    str = chatdata + str;
                }
                sessionStorage.setItem(res.fromName,str);

            };
        },
            ws.onclose = function (ev) {
                $("#username").html("用户："+ username +"<span>离线</span>");
            }

        showChat = function(name){
            // alert("dsaad");
            toName = name;
            //清空聊天区
            $("#content").html("");
            $("#new").html("当前正与"+toName+"聊天");
            var chatdata = sessionStorage.getItem(toName);
            if (chatdata != null){
                $("#content").html(chatdata);
            }
        };
        //发送消息
        $("#submit").click(function () {
            //获取输入的内容
            var data = $("#input_text").val();
            $("#input_text").val("");
            var json = {"toName": toName ,"message": str_m};
            //将数据展示在聊天区
            var str = "<span id='mes_right'>"+ str_m +"</span></br>";

            $.ajax({
                url:"/user/chatgpt?message="+str_m,
                success:function (res) {
                    console.log(res)
                    //不是系统消息
                    var str = "<div class=\"mb2c_left\">\n" +
                        "                <div class=\"text-center mb2c_left_box1\">\n" +
                        "                    <img src=\"./images/userImages/xiaojiejie_01.png\">\n" +
                        "                </div>\n" +
                        "                <div class=\"mb2c_left_box2\">\n" +
                        "                    <p>"+ res.data +"</p>\n" +
                        "                </div>\n" +
                        "            </div>"
                    // var str = "<span id='mes_left'>"+ res.message +"</span></br>";
                        $("#content").append(str);
                },

            });
            var chatdata = sessionStorage.getItem(toName);
            if (chatdata != null){
                str = chatdata + str;
            }
            sessionStorage.setItem(toName,str);
            //发送数据
            ws.send(JSON.stringify(json));
        })
    })




</script>
</body>
</html>